<template>
  <div>
    <!-- 三级联动的行内表单 -->
    <el-form :inline="true" class="demo-form-inline" :model="tmFormId">
      <el-form-item label="一级分类">
        <el-select :disabled="show" placeholder="请选择" v-model="tmFormId.category1Id" @change="handler">
          <el-option :label="item.name" :value="item.id" v-for="item in list1" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select :disabled="show" placeholder="请选择" v-model="tmFormId.category2Id" @change="handler1">
          <el-option :label="item.name" :value="item.id" v-for="item in list2" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select  :disabled="show" placeholder="请选择" v-model="tmFormId.category3Id" @change="handler2">
          <el-option :label="item.name" :value="item.id" v-for="item in list3" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    name: 'categorySelect',
    //父级函数传递给子函数的数据，子函数用props进行接受
    props:['show'],
    data() {
      return {
        //存放一级分类的数据数组
        list1:[],
        //存放二级分类的数据数组
        list2:[],
        //存放三级分类的数据数组
        list3:[],
        tmFormId:{
          //存放一级,二级，三级分类的id
          category1Id:'',
          category2Id:'',
          category3Id:'',
        }

      }
    },
    mounted(){
      //组件挂载完毕调用获取一级分类的方法
      this.getCateGory1List();
      
    },
    methods:{
      //获取一级分类数据的方法
      async getCateGory1List(){
        let result=await this.$API.attr.reqCateGory1List();
        console.log(result);
        if(result.code==200){
          this.list1=result.data;
        }

      },
      //一级分类的option值发生改变触发的事件(当一级分类的option发生变化变化的时候，获取二级分类的数据)
      async handler(){
        //解构出一级分类的id
        const {category1Id}=this.tmFormId;
        //把子组件的id值传递给父组件
        this.$emit('getCategoryId',{categoryId:category1Id,level:1})
        //一级分类的option发生变化之后，清除数据
        this.list2=[];
        this.list3=[];
        this.tmFormId.category2Id='';
        this.tmFormId.category3Id='';
        //发送请求,通过一级分类的id获取二级分类的数据
        let result=await this.$API.attr.reqCateGory2List(category1Id);
        console.log(result,"999");
        if(result.code==200){
          this.list2=result.data;
        }
      },
      //二级分类的option值发生改变触发的事件(当二级分类的option发生变化的时候，获取三级分类的数据)
      async handler1(){
        //解构出二级分类的id
        let {category2Id}=this.tmFormId;
         //把子组件的id值传递给父组件
        this.$emit('getCategoryId',{categoryId:category2Id,level:2})
        // 二级分类的option发生变化之后，清除数据
        this.list3=[];
        this.tmFormId.category3Id='';
        //发送请求，通过二级分类的id获取三级分类的数据
        let result=await this.$API.attr.reqCateGory3List(category2Id);
        console.log(result,"99999");
        if(result.code==200){
          this.list3=result.data;
        }
      },
      //三级分类的option值发生改变时
      handler2(){
        //解构出三级分类的id
        let {category3Id}=this.tmFormId;
        //把子组件的id值传递给父组件
        this.$emit('getCategoryId',{categoryId:category3Id,level:3})

      }
    }

  }

</script>
<style lang="less" scoped>

</style>
